<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>08-函数进阶</title>
  <style type="text/css">
  * {
        padding: 0;
        margin: 0;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
    }

    dl {
        width: 400px;
        display: flex;
        flex-direction: column;
    }

    dt {
        background: #e67e22;
        border-bottom: solid 2px #333;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    dd {
        height: 200px;
        background: #bdc3c7;
        font-size: 5em;
        text-align: center;
        line-height: 200px;
    }
    </style>
</head>
<body>
   <dl>
        <dt>后盾人</dt>
        <dd>1</dd>
        <dt>hdcms</dt>
        <dd hidden="hidden">2</dd>
    </dl>
  <script type="text/javascript">
    function pannel(i) {
      var dds = document.querySelectorAll("dd");
      dds.forEach(dd => {
        dd.setAttribute('hidden', 'hidden')
      })
      dds[i].removeAttribute('hidden')
    }
        
  document.querySelectorAll("dt").forEach((dt, i)=> {
      // dt.addEventListener('click',  pannel.bind(null, i))
      dt.addEventListener('click', () => pannel.call(null, i))
  })

    /*
    document.querySelectorAll("dt").forEach((dt, i)=> {
      dt.addEventListener('click', function() {
        var dds = document.querySelectorAll("dd");
        dds.forEach(dd => {
          dd.setAttribute('hidden', 'hidden')
        })
        dds[i].removeAttribute('hidden')
      }, false)
    })
    */
  </script>
</body>
</html>